<template>
    <basic-container>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="快递平台选择" name="A">
                <div>
                    <h5>温馨提示：</h5>
                    <p>快递鸟官网：<el-link href="http://www.kdniao.com/" target="_blank">http://www.kdniao.com/</el-link></p>
                    <p>阿里短信服务网址：<el-link href="http://www.kuaidi100.com/" target="_blank">http://www.kuaidi100.com/</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="快递平台" prop="kdSwtich">
                            <el-radio-group v-model="ruleForm.kdSwtich">
                                <el-radio label="1">快递100</el-radio>
                                <el-radio label="2">快递鸟</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" size="medium"><i class="el-icon-check"></i>  提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-tab-pane>
            <el-tab-pane label="快递鸟" name="B">
                <div>
                    <h5>温馨提示：</h5>
                    <p>请自行申请快递鸟账号，选择相应的服务。</p>
                    <p>快递鸟官网：<el-link href="http://www.kdniao.com/" target="_blank">http://www.kdniao.com/</el-link></p>
                    <!--<p>快递鸟配置文档：<el-link href="http://test.lightkitch.com/front/doc_courierbird.htm" target="_blank">http://test.lightkitch.com/front/doc_courierbird.htm</el-link></p>-->
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objB" :option="optionB"  @submit="submitB">
                    </avue-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="快递100" name="C">
                <div>
                    <h5>温馨提示：</h5>
                    <p>请自行申请快递100账号，选择相应的服务。</p>
                    <p>阿里短信服务网址：<el-link href="http://www.kuaidi100.com/" target="_blank">http://www.kuaidi100.com/</el-link></p>
                    <!-- <p>快递100配置文档：<el-link href="http://test.lightkitch.com/front/doc_express.htm" target="_blank">http://test.lightkitch.com/front/doc_express.htm</el-link></p>-->
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objC" :option="optionC"  @submit="submitC">
                    </avue-form>
                </div>
            </el-tab-pane>
        </el-tabs>
    </basic-container>
</template>
<script>
    import {
        getExpress,
        setExpress
    } from "../../api/base/sysSet/expressSet";
    import {
        convertAddCode
    } from '@/util/util';

    export default {
        data() {
            return {
                ruleForm:{
                    kdSwtich:''
                },
                rules:{
                    kdSwtich:[
                        { required: true, message: '请选择快递', trigger: 'change' }
                    ]
                },
                activeName: 'A',
                objB:{},
                objC:{},
                optionB:{
                    emptyBtn:false,
                    labelWidth:'120',
                    labelPosition:'left',
                    column: [{
                            label: "私钥",
                            prop: "kdniaoAppKey",
                            span: 24,
                            rules: [{
                                required: true,
                                message: "请输入私钥",
                                trigger: "blur"
                            }]
                    },{
                            label: "商户ID",
                            prop: "kdniaoEBusinessID",
                            span: 24,
                            rules: [{
                                required: true,
                                message: "请输入商户id",
                                trigger: "blur"
                            }]
                    }]
                },
                optionC:{
                    emptyBtn:false,
                    labelWidth:'120',
                    labelPosition:'left',
                    column: [{

                        label: "私钥",
                        prop: "kd100Key",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入私钥",
                            trigger: "blur"
                        }]
                    },{
                        label: "商户ID",
                        prop: "kd100Customer",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入商户id",
                            trigger: "blur"
                        }]
                    }]
                }


            };
        },
        computed: {

        },
        created(){
            this.getData()
        },
        methods: {
            getData(){
                getExpress().then(res=>{
                    console.log(res)
                    if(res.data.code==200){
                        let obj=res.data.data
                        this.ruleForm.kdSwtich=obj.kdSwtich
                        this.objB.kdniaoAppKey=obj.kdniaoAppKey
                        this.objB.kdniaoEBusinessID=obj.kdniaoEBusinessID
                        this.objC.kd100Key=obj.kd100Key
                        this.objC.kd100Customer=obj.kd100Customer
                    }
                })
            },
            handleClick() {
            },
            //待处理
            submitForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        setExpress(this.ruleForm).then(res=>{
                            this.$message({
                                message:'提交成功',
                                type:'success'
                            })
                            this.activeName='A'
                            this.getData()
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            submitB (form,done) {
                convertAddCode(this.objB.kdniaoAppKey,data=>{
                    this.objB.kdniaoAppKey = data;
                });
                setExpress(this.objB).then(res=>{
                    done()
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='B'
                    this.getData()
                })
            },
            submitC (form,done) {
                convertAddCode(this.objC.kd100Key,data=>{
                    this.objC.kd100Key = data;
                });
                setExpress(this.objC).then(res=>{
                    done()
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='C'
                    this.getData()
                })

            },
        }
    };
</script>
<style>
    h5{
        color: darkred;
        font-weight: bold;
    }
    p{
        line-height: 30px;
    }

</style>